<template>
  <DIV>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>
       <el-radio v-for="(item,index) in store" v-model="owner_id" :label="item.id" :key="index">{{
           item.name
         }}</el-radio>

      </span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sellSure">确 定</el-button>
          </span>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="typeName" label="种类"></el-table-column>
      <el-table-column prop="health" label="健康"></el-table-column>
      <el-table-column prop="birthday" label="生日" :formatter="formatter"></el-table-column>
      <el-table-column prop="owner_id" label="主人" width="180"></el-table-column>
      <el-table-column prop="store_id" label="商店" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="button" v-model="pet_id" size="mini" @click="sellPet(scope.row)">出售</el-button>
        </template>
      </el-table-column>
    </el-table>

  </DIV>

</template>

<script>
import axios from "axios";

export default {
  name: "ShowOwner",
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      store: [],
      owner_id: '',
      pet_id:''
    }
  }, mounted() {
    const me = this
    axios.get('http://localhost:3000/sp',{
      params:{
        store_id : this.$store.state.petstore.id
      }
    }).then(function (res) {
      me.tableData = res.data.data
    }).catch(function (err) {
      console.error(err)
    });
    axios.get('http://localhost:3000/spp').then(function (res) {
      me.store = res.data.data
    }).catch(function (err) {
      console.error(err)
    })

  }, methods: {
    sellPet(row){
      this.dialogVisible = true;
      this.pet_id = row.id
    },
    sellSure(){
      const petid = this.pet_id;
      const petownerid = this.owner_id;
      const petstoreid = this.$store.state.petstore.id;
      const balance = this.$store.state.petstore.balance;
      console.log(petid)
      console.log(petownerid)
      console.log(petstoreid)
      console.log(balance)
      if (balance >= 500){
        axios.get('http://localhost:3000/storesell', {
          params: {
            petid,
            petstoreid,
            petownerid
          }
        }).then(function (res) {
          console.log(res)
        }).catch(function (err) {
          console.log(err)
        })
      }else {
        this.$message.error('无法购买')
      }
      this.dialogVisible = false;
    },
    handleEdit(row) {
      console.log(row.id);
    },
    formatter(row) {
      const d = new Date(row.birthday)
      return d.toLocaleDateString()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);

      this.multipleSelection = val;
    },
    handleClose(done) {
      console.log(done);
    },
  },
  watch: {}
}
</script>

<style scoped>

</style>